<template>
  <div class="countent_warp">
    <div class="imgBox">
      <img src="../../../static/images/logo.jpg" alt />
    </div>

    <div class="iptWrap">
      <span>手机号:</span>
      <input type="number" title="手机号" placeholder="请输入手机号" v-model="tel" />
      <div class="timer">
        <span v-if="visible1" @click="_getPhoneCode">获取验证码</span>
        <span v-if="visible2" v-text="timer"></span>
      </div>
    </div>
    <div class="iptWrap">
      <span>验证码:</span>
      <input type="text" title="验证码" placeholder="请输入验证码" v-model="code" />
      <span @click="_getAuthentication" class="timer getIn">提交</span>
    </div>
    <i-message id="message" />
  </div>
</template>
<script>
const { $Message } = require("../../../static/dist/base/index");
export default {
  data() {
    return {
      visible1: true,
      visible2: false,
      tel: "",
      code: "",
      openid: "",
      second: 60,
      timer: `重新获取(60)`,
      profile: {}
    };
  },
  onLoad: function(options) {
    let that = this;

    wx.getStorage({
      key: "userInfo",
      success(res) {
        that.profile = res.data;
        that.openid = res.data.openid;
      }
    });
  },
  methods: {
    //s
    timerFn() {
      var that = this;
      var clock = setInterval(frame, 1000);
      function frame() {
        if (that.second == 1) {
          that.visible2 = false;
          that.visible1 = true;
          clearInterval(clock);
        } else {
          that.visible2 = true;
          that.visible1 = false;
          that.second--;
          that.timer = `重新获取(${that.second})`;
        }
      }
    },

    // 获取验证码
    _getPhoneCode() {
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.tel)) {
        $Message({
          content: "手机格式错误",
          type: "error"
        });
      } else {
        let data = {
          mobile: this.tel,
          type: "crminterface/Interf/authentication"
        };
        this.$apis.getPhoneCode(data).then(res => {
          if (res.errcode) {
            $Message({
              content: "验证码发送失败",
              type: "error"
            });
          } else {
             $Message({
              content: "验证码发送成功",
              type: "success"
            });
            this.timerFn();
          }
        });
      }
    },
    //提交数据
    _getAuthentication() {
      if (!/^\d{6}$/.test(this.code)) {
        $Message({
          content: "验证码格式错误",
          type: "error"
        });
      } else if (/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.tel)) {
        let data = {
          code: this.code,
          tel: this.tel,
          openid: this.openid,
          avatarurl: this.profile.avatarurl,
          nickname: this.profile.nickName,
          gender: this.profile.gender
        };
        this.$apis.getAuthentication(data).then(res => {
          if (res.code == "200") {
            wx.showToast({
              title: "验证成功",
              icon: "success",
              duration: 2000
            });
            var pages = getCurrentPages();
            console.log(pages);
            setTimeout(() => {
              wx.navigateBack({
                delta: pages.length - 1
              });
            }, 2300);
          } else if (res.errcode) {
            wx.showToast({
              title: "验证失败",
              icon: "none",
              duration: 2000
            });
          }
        });
      } else {
        $Message({
          content: "手机格式错误",
          type: "error"
        });
      }
    }
  }
};
</script >

<style  lang="scss">
.countent_warp {
  margin: 0 20px;
  .imgBox {
    margin: 0 auto;
    margin-top: 50px;
    width: 100px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
      opacity: 0.66;
    }
  }
  .setting {
    position: absolute;
    top: 10px;
    right: 26px;
    width: 20px;
    height: 20px;
  }
  .iptWrap {
    height: 40px;
    line-height: 40px;
    display: flex;
    margin-top: 20px;
    border-bottom: 1px solid #f1f1f1;
    align-items: center;
    position: relative;
    font: 600 14px Microsoft YaHei;
    color: #333;
    input {
      padding-left: 20px;
      width: 170px;
    }
    .timer {
      position: absolute;
      right: 0;
      height: 40px;
      line-height: 40px;
      background-color: #f1f1f1;
      font-size: 14px;
      border-radius: 8px;
      opacity: 0.8;
      box-sizing: border-box;
      padding: 0 5px;
    }
    .getIn {
      text-align-last: justify;
      width: 80px;
    }
  }
}
</style>
